<template>
  <view class="login-container">
    <image src="../../static/logo.png" class="logo" />
    <text class="logo-text">绥江台球室</text>
    <input type="text" placeholder="请输入您的手机号" class="phone-input" />
    <button class="login-btn">登录</button>
    <button class="wechat-login-btn" @click="silentLogin">微信登录</button>
  </view>
</template>

<script>
  export default {
    methods: {
      silentLogin() {
        console.log('开始静默登录流程...');
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log('uni.login 成功, 获取到 code:', loginRes.code);
            // 在这里模拟将 code 发送到后端换取 session
            console.log('模拟发送 code 到后端...');
            // 模拟后端响应成功
            setTimeout(() => { // 使用 setTimeout 模拟网络延迟
              uni.getUserInfo({
                provider: 'weixin',
                success: (userInfoRes) => {
                  console.log('获取用户信息成功:', userInfoRes);
                  const avatarUrl = userInfoRes.userInfo.avatarUrl;
                  uni.setStorageSync('avatarUrl', avatarUrl);
                  console.log('头像URL已存储:', avatarUrl);
                  // 继续处理登录成功逻辑
                  console.log('模拟后端响应成功: { statusCode: 200, data: { token: "mock_token", openid: "mock_openid" } }');
                  console.log('登录成功，跳转到首页...');
                  uni.reLaunch({
                    url: '/pages/index/index'
                  });
                },
                fail: (err) => {
                  console.error('获取用户信息失败:', err);
                  uni.showToast({
                    title: '获取用户信息失败',
                    icon: 'none'
                  });
                }
              });
            }, 500); // 模拟 500ms 的后端处理时间
          },
          fail: (err) => {
            console.error('uni.login 失败:', err);
            uni.showToast({
              title: '微信登录失败', // 更具体的错误提示
              icon: 'none'
            });
          }
        });
      }
    },
    mounted() {
      const hasAuthorized = uni.getStorageSync('hasAuthorized');
      if (hasAuthorized) {
        this.silentLogin();
      } else {
        uni.showModal({
          title: '授权确认',
          content: '是否同意使用微信登录？',
          success: (res) => {
            if (res.confirm) {
              uni.setStorageSync('hasAuthorized', true);
              this.silentLogin();
            } else {
              console.log('用户取消授权登录');
            }
          }
        });
      }
    }
  }
</script>

<style>
  .login-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to bottom, #f5f5f5, #e0f7fa);
  }
  .logo {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 5rpx;
    background-color: red;
    border-radius: 50%;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    z-index: 10;
  }
  .logo-text {
    position: absolute;
    font-size: 20pt;
    color: black;
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .phone-input {
    position: absolute;
    width: 80%;
    height: 100dp;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    border-bottom: 1px solid #ccc;
    border-radius: 15rpx;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    color: #999;
    margin-top: 30rpx;
    font-size: 18px;
  }
  .login-btn {
    position: absolute;
    width: 80%;
    height: 56dp;
    line-height: 56dp;
    text-align: center;
    background-color: #07C160;
    color: #fff;
    border-radius: 10rpx;
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 20dp;
  }
  .wechat-login-btn {
    position: absolute;
    width: 80%;
    height: 40dp;
    line-height: 40dp;
    text-align: center;
    background-color: #1AAD19;
    color: #fff;
    border-radius: 10rpx;
    top: 53%;
    left: 50%;
    transform: translateX(-50%);
}
  .footer-text {
    position: absolute;
    bottom: 10pt;
    font-size: 10pt;
    text-align: center;
    width: 100%;
  }
</style>